import React, { useEffect, useState } from "react";
import { BrowserRouter as Router , Route , Link , Switch } from "react-router-dom";
import "./List.css";

const ShowList = () => {
    const [data,setData] = useState([]);

    useEffect(() => {
        fetch("https://cnodejs.org/api/v1/topics")
        .then(res => res.json())
        .then(res => {
            setData(res.data);
        })
    },[]);

    return <div style={{display:"flex"}}>
            <div>
                <ul>
                    {
                        data.map(item => 
                            <Router>
                                <Link to={`/list/${item.id}`}><li key={item.id} className="list">
                                    <img src={item.author.avatar_url} alt="头像"/>
                                    <span className="reply">{item.reply_count}/</span>
                                    <span className="visit">{item.visit_count}</span>
                                    <p>{item.title}</p>
                                </li></Link>
                            </Router>    
                        )
                    }
                </ul>
            </div>
        </div>
};

export default ShowList;
